<template>
  <!--视图-->

  <div>
    <el-button @click="getdp()" type="primary" size="small">大屏展示</el-button>
    <el-button @click="excel()" type="primary" size="small">excel导出</el-button>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        fixed
        prop="cargoId"
        label="仓库序号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="cargoName"
        label="仓库名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="cityName"
        label="省/市/区"
        width="200">
        <template v-slot="r">
          {{r.row.provinceName}}    -- {{r.row.districtName}}   --  {{r.row.cityName}}
        </template>
      </el-table-column>
      <el-table-column
        prop="adress"
        label="详细地址"
        width="120">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="120">
      </el-table-column>
      <el-table-column
        prop="people"
        label="创建人"
        width="120">
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        width="120">
      </el-table-column>
      <el-table-column
        prop="sick"
        label="库存量"
        width="120">
      </el-table-column>
      <el-table-column
        prop="info"
        label="天气情况"
        width="120">
      </el-table-column>
      <el-table-column
        prop="temperature"
        label="温度"
        width="120">
      </el-table-column>
      <el-table-column
        prop="humidity"
        label="湿度"
        width="120">
      </el-table-column>
      <el-table-column
        prop="direct"
        label="风向"
        width="120">
      </el-table-column>
      <el-table-column
        prop="power"
        label="风力"
        width="120">
      </el-table-column>
      <el-table-column
        prop="api"
        label="空气质量"
        width="120">
      </el-table-column>
      <el-table-column
        label="图片"
        width="120">
        <template v-slot="r">
          <el-image
            style="width: 100px; height: 100px"
            :src="r.row.pic"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button @click="handleClick(0)" type="text" size="small" icon="el-icon-search">添加</el-button>
          <el-button type="text" size="small"  @click="updateProps(scope.row)" icon="el-icon-search">修改</el-button>
          <el-button type="text" size="small"  @click="getdelete(scope.row.cargoId)">删除</el-button>
          <el-button type="text" size="small"  @click="getqs(scope.row)" icon="el-icon-search" style="size: 10px">签收</el-button>
          <el-button type="text" size="small"  @click="churuku(scope.row)" icon="el-icon-search" style="size: 10px">出入库按钮</el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-dialog title='添加仓库' :visible.sync="dialogFormVisible" >
      <el-form :model="form"  :rules="rules" ref="formName">
        <el-form-item label="仓库名称" :label-width="formLabelWidth" prop="cargoName">
          <el-input v-model="form.cargoName" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="省/市/区" :label-width="formLabelWidth">
          <el-cascader   v-model="areaIds"  :options="options"    @change="getchange"  clearable></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" :label-width="formLabelWidth" prop="adress">
          <el-input v-model="form.adress" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="创建人" :label-width="formLabelWidth">
          <el-input v-model="form.people" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remark" autocomplete="off"  ></el-input>
        </el-form-item>

        <el-upload
          class="avatar-uploader"
          :headers="imgupload.headers"
          :action="imgupload.url + '?updateSupport=' + imgupload.updateSupport"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          >
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>



      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addtrue('formName')">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title='修改仓库' :visible.sync="dialogFormVisible1">
      <el-form :model="form1">
        <el-form-item label="仓库名称" :label-width="formLabelWidth">
          <el-input v-model="form1.cargoName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="省/市/区" :label-width="formLabelWidth">
          <el-cascader v-model="areaIds" :options="options"    @change="getchange1"   clearable></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" :label-width="formLabelWidth">
          <el-input v-model="form1.adress" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="创建人" :label-width="formLabelWidth">
          <el-input v-model="form1.people" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form1.remark" autocomplete="off"  ></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="updateCargo">确 定</el-button>
      </div>
    </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[3, 5, 10, 15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>

import {deteletCargo, getadd, gettype1, listcargo} from "../../api/farme/farme";
import {getToken} from "@/utils/auth";


export default {
  name: "CargoView",
  data() {//属性
    return {
      imageUrl:"",
      tableData:[],
      total:0,
      pageNum:1,
      pageSize:3,
      dialogFormVisible:false,
      form:{},
      formLabelWidth: '120px',
      areaIds:[0,0,0],
      options:[],
      form1:{},
      imgupload: {
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/farmes/process/addPic"
      },
      dialogFormVisible1:false,
      rules: {
        cargoName: [
          { required: true, message: '请输入仓库名称', trigger: 'blur' },

        ],
        adress: [
          { required: true, message: '请输入地址', trigger: 'blur' },
        ]
      }
    }
  }, methods: {//自定义方法
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.pic=res;
      console.log(res)
    },
    getdp()
    {
      this.$router.push("/farme/da")
    },
    excel()
    {
      window.location.href="http://localhost:8891/cargo/excelCargo";
    },
    getdelete(id)
    {

      deteletCargo(id).then(res=>{
        if(res.code==200)
        {
          this.$message.success(res.msg)
          this.list();
        }else
        {
          this.$message.error(res.msg)
        }
      })
    },
    getchange1(id)
    {
      console.log(id)
      if(id.length>0)
      {
        this.form1.xid=id[0];
        this.form1.sid=id[1];
        this.form1.qid=id[2];
      }else
      {
        this.form1.provinceId='';
      }
    },
    updateCargo()
    {
      getadd(this.form1).then(res=>{
        if(res.code==200)
        {
          this.$message.success(res.msg)
          this.dialogFormVisible1 = false;
          this.list();
        }else
        {
          this.$message.error(res.msg)
        }
      })
    },
    updateProps(scope)
    {

      this.areaIds=[]
      this.form1=scope;
      if(scope.xid){
        this.areaIds.push(scope.xid,scope.sid,scope.qid);
      }
      console.log(this.areaIds)
      this.dialogFormVisible1=true;


    },
    addtrue(formName)
    {

      this.$refs[formName].validate((valid) => {
        if (valid) {
          getadd(this.form).then(res => {
            if(res.code==200)
            {
              this.$message.success(res.msg)
              this.dialogFormVisible = false;
            }elsegs
            {
              this.$message.error(res.msg)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });




    },
    gettype()
    {
      gettype1().then(res => {
        this.options = res.data
      });
    },
    getchange(id)
    {
      console.log(id)
      if(id.length>0)
      {
        this.form.xid=id[0];
        this.form.sid=id[1];
        this.form.qid=id[2];

      }else
      {
        this.form.provinceId='';
      }
    },
    handleClick()
    {
    this.dialogFormVisible=true;

    },
    handleCurrentChange(val) {
      this.pageNum=val
      this.list();
    },
    handleSizeChange(val) {

      this.pageSize=val
    this.list();
  },
  list()
    {
      listcargo(this.pageNum,this.pageSize).then(res => {
        this.tableData = res.data.list
        this.total=res.data.total

      });
    }
  }, created() { //钩子函数

    this.list();
    this.gettype();

  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
